<template>
    <view class="addCommunity">
        <view class="city item">
            <text class="title">城市</text>
            <view class="item-L" @click="getAuthorizeInfo">
                <text>{{ communityInfo.cityname || "点击定位当前城市" }}</text>
                <u-icon name="arrow-right" :size="13"></u-icon>
            </view>
        </view>
        <view class="community item">
            <view>
                <text class="title">小区名称</text>
                <text style="color: #ED6609;"> *</text>
            </view>
            <view class="community-R">
                <input class="communityInput" type="text" :value="communityInfo.community_name" @blur="inputBlur"
                    placeholder="输入小区名字" />
                <!-- <u-icon v-if="!state.showCommunity" name="arrow-right" :size="13"></u-icon>
                <u-icon v-else name="arrow-down" :size="13"></u-icon> -->
            </view>
        </view>
        <view class="communityList" v-if="state.showCommunity">
            <view class="communityData" v-for="(item, index) in communityDataList" :key="index"
                @click="onCommunityItem(item)">
                <text class="name">{{ item.name }}</text>
                <text class="address">地址：{{ item.cityname + item.adname + item.address }}</text>
            </view>
        </view>

        <!-- <view class="type item">
            <text class="title">建筑类型</text>
            <view>
                <u-icon name="arrow-down" :size="15"></u-icon>
            </view>
        </view> -->
        <view class="household item">
            <text class="title">总户数</text>
            <view class="item-L">
                <input class="valueInput" placeholder="请填写，不知道可填空"
                v-model="communityInfo.property_management_info.households_count">
            </view>
        </view>
        <view class="propertyFee item">
            <text class="title">物业费</text>
            <view class="item-L">
                <input class="valueInput" placeholder="请填写，不知道可填空"
                v-model="communityInfo.property_management_info.property_fees">
            </view>
        </view>
        <view class="waterRate item">
            <text class="title">水费</text>
            <view class="item-L">
                <text class="value">选择类型</text>
                <u-icon name="arrow-right" :size="15"></u-icon>
                <input class="waterInput" type="text" v-model="communityInfo.property_management_info.water.rate"
                    placeholder="0.0">
                <text class="value">元/吨</text>
            </view>
        </view>
        <view class="electticCharge item">
            <text class="title">电费</text>
            <view class="item-L">
                <text class="value" @click="showType = true">选择类型</text>
                <u-icon name="arrow-right" :size="15"></u-icon>
                <input class="eleInput" type="text" :value="communityInfo.property_management_info.electricity.rate"
                    placeholder="0.0">
                <text class="value">元/度</text>
                <u-picker :show="showType" :columns="showTypeColumns" confirmColor="#9472FF" @cancel="showType = false"
                    closeOnClickOverlay @close="showType = false"></u-picker>
            </view>
        </view>
        <view class="property item">
            <text class="title">物业公司</text>
            <view class="item-L">
                <input class="valueInput" placeholder="请填写，不知道可填空"
                v-model="communityInfo.property_management_info.property_management_company">
            </view>
        </view>
        <view class="property item">
            <text class="title">物业电话</text>
            <view class="item-L">
                <input class="valueInput" placeholder="请填写，不知道可填空"
                v-model="communityInfo.property_management_info.phone_number">
            </view>
        </view>
        <view class="property item">
            <text class="title">物业地址</text>
            <view class="item-L">
                <input class="valueInput" placeholder="请填写，不知道可填空"
                v-model="communityInfo.property_management_info.address">
            </view>
        </view>
        <view class="communityPic">
            <view class="title">
                <text class="title1">小区介绍</text>
                <text class="title2">最多30字</text>
            </view>
            <view class="self_introduction">
                <textarea name="self_introduction" cols="20" rows="3" placeholder="用几句话介绍一下小区吧~"></textarea>
            </view>
        </view>
        <view class="communityPic">
            <view class="title">
                <text class="title1">小区封面图</text>
                <text class="title2">最多20张</text>
            </view>
            <view class="addPic">
                <u-icon name="camera" :size="40"></u-icon>
                <text>添加图片</text>
            </view>
        </view>
        <view class="organization" v-for="(item, index) in organizationList.slice(0, state.current)" :key="index">
            <text class="title">
                {{ '机构' + (index+1) }}
            </text>
            <view class="info">
                <view class="infoItem">
                    <text>机构名称</text>
                    <input class="valueInput" v-model="item.organization" placeholder="请填写，不知道可填空">
                </view>
                <view class="infoItem">
                    <text>机构地址</text>
                    <input class="valueInput" v-model="item.address" placeholder="请填写，不知道可填空">
                </view>
                <view class="infoItem">
                    <text>机构电话</text>
                    <input class="valueInput" v-model="item.phoneNumber" placeholder="请填写，不知道可填空">
                </view>
            </view>
        </view>
        <view class="addOrganization"><text @click="addOrganization" v-if="state.current != 3">新增</text></view>
        <view style="height: 150rpx;"></view>
        <view class="addOk" @click="addCommunity">
            <text>
                确认添加
            </text>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { getAddr, getAddressInfo } from "../../plugins/mapInfo";
import { ref, reactive } from 'vue';

import { addCommunityFun } from "../../api/community";

const state = ref({
    current: 1,
    showCommunity: false
})
const showType = ref(false)
const showTypeColumns = reactive([
    ['商用', '民用']
]);
const communityDataList: any = ref([]);
const organizationList = ref([
    { organization: '', address: '', phoneNumber: '' },
    { organization: '', address: '', phoneNumber: '' },
    { organization: '', address: '', phoneNumber: '' }
]);

const communityInfo = reactive({

    avatar: "", /* 小区头像 */
    community_name: "", /* 社区名称 */
    address: "",
    /* 经纬度信息 */
    location: "",
    pname: "", /* 省份 */
    cityname: "",
    adname: "",
    self_introduction: "",
    publication_count: 0,
    community_population: 0,
    community_type: "",
    followers_count: 0,
    create_user_id: "1",
    property_management_info: {
        property_management_company: "",
        phone_number: "",
        address: "",
        property_fees: "",
        households_count: "",
        electricity: {
            type: "string",
            rate: ""
        },
        water: {
            rate: "",
            type: "string"
        }
    },
    convenient_contact_information: [
    ...organizationList.value.slice(0, state.value.current)
        /* {
            organization: "党群服务中心",
            phoneNumber: "15255555555",
            address: "西溪八方城4幢"
        },
        {
            address: "西溪八方城6幢负一楼",
            phoneNumber: "15259955555",
            organization: "监控室"
        } */
    ]

})
const addOrganization = () => {
    if (state.value.current == 3) {
        return
    }
    state.value.current++
}

const getAuthorizeInfo = async () => {
    uni.authorize({
        scope: "scope.userLocation",
        success(res) {
            uni.getLocation({
                type: 'wgs84',
                success: async function (res) {
                    let coord = res.longitude + ',' + res.latitude
                    /* 将目前获取经纬度信息存到小区信息中 */
                   /*  communityInfo.location.coordinates[0] = res.longitude
                    communityInfo.location.coordinates[1] = res.latitude */
                    let addressInfo: any = await getAddressInfo(coord)
                    communityInfo.cityname = addressInfo.data.regeocode.addressComponent.city
                }
            });
        },
        /* 如果在权限请求时点击取消，目前未测试 */
        fail(err) {
            uni.showModal({
                content: "检测到您没打开获取定位功能权限，是否去设置打开？",
                confirmText: "确认",
                cancelText: "取消",
                success: function (res) {
                    if (res.confirm) {
                        uni.openSetting({
                            success() {
                                uni.getLocation({
                                    type: 'wgs84',
                                    success: function (res) {
                                        console.log('当前位置的经度：' + res.longitude);
                                        console.log('当前位置的纬度：' + res.latitude);
                                    }
                                });
                            }
                        })
                    }
                }
            })
        }
    })
}



const inputBlur = async () => {
    let communityList: any = await getAddr(communityInfo.community_name, communityInfo.cityname)
    communityDataList.value = communityList.data.pois.slice(0, 10)
    state.value.showCommunity = true
    console.log('communityDataList :>> ', state.value.showCommunity);

}

const onCommunityItem = (item: any) => {
    console.log('item :>> ', item);
    communityInfo.community_name = item.name
    communityInfo.cityname = item.cityname
    communityInfo.adname = item.adname
    communityInfo.address = item.address
    communityInfo.pname = item.pname
    communityInfo.community_type = item.type
    communityInfo.location = item.location
    state.value.showCommunity = false

}

const addCommunity = () => {
    console.log('点击了添加按钮 :>> ', communityInfo);
    let res = addCommunityFun(communityInfo)
    console.log('res :>> ', res);
    console.log('请求结束 :>> ');
}
</script>

<style lang="scss" scoped>
.addCommunity {
    display: flex;
    flex-direction: column;

    .item {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx;
        margin-bottom: 20rpx;
        font-size: 30rpx;

        .title {
            font-weight: bold;
        }

        .item-L {
            display: flex;
            flex-direction: row;
            align-items: center;
            font-size: 27rpx;

            .value {
                color: #B7B7B7;
                margin-right: 10rpx;
            }

            .valueInput {
                text-align: right;
            }

            .waterInput,
            .eleInput {
                width: 70rpx;
                height: 20rpx;
                border: 1rpx solid #000;
                border-radius: 10rpx;
                padding: 0 10rpx;
                margin: 0 10rpx;
                box-sizing: border-box;
                text-align: center;
            }
        }
    }

    .community-R {
        display: flex;
        flex-direction: row;

        .communityInput {
            text-align: right;
            margin-right: 5rpx;
        }
    }

    .communityList {
        width: 100%;
        height: 370rpx;
        overflow: scroll;
        overflow-y: scroll;

        .communityData {
            padding-left: 40rpx;
            margin-bottom: 20rpx;
            display: flex;
            flex-direction: column;

            .name {
                font-size: 35rpx;
                font-weight: bold;
            }

            .address {
                font-size: 25rpx;
                color: #7E7E7E;
            }
        }
    }


    .communityPic {
        display: flex;
        flex-direction: column;
        padding: 20rpx;
        margin-top: 20rpx;

        .title1 {
            font-size: 30rpx;
            font-weight: bold;
            margin-right: 10rpx;
        }

        .title2 {
            font-size: 25rpx;
            color: #B7B7B7;
        }

        .addPic {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #F6F6F6;
            padding: 50rpx 0;
            font-size: 27rpx;
            margin-top: 20rpx;
            border-radius: 10rpx;
            color: #8B8B8B;
        }

        .self_introduction{
            background-color: #F6F6F6;
            font-size: 30rpx;
            margin-top: 20rpx;
            border-radius: 10rpx;
            color: #8B8B8B;
            height: 150rpx;
            overflow: hidden;

            textarea{
                margin: 20rpx;
                height: 150rpx;
            }
        }
    }

    .organization {
        display: flex;
        flex-direction: column;
        align-content: center;
        padding: 20rpx;

        .title {
            font-size: 30rpx;
            font-weight: bold;
            margin-bottom: 20rpx;
        }

        .info {
            padding-left: 30rpx;
            display: flex;
            flex-direction: column;

            .infoItem {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-content: center;
                font-size: 27rpx;
                margin-bottom: 10rpx;

                .valueInput {
                    text-align: right;
                }
            }
        }
    }

    .addOrganization {
        text-align: center;

        color: #976AFF;

        text {
            border: 1rpx solid #976AFF;
            padding: 10rpx 20rpx;
            font-size: 30rpx;
            border-radius: 10rpx;
        }
    }

    .addOk {
        position: fixed;
        z-index: 10;
        right: 15%;
        bottom: 30rpx;
        background-color: #976AFF;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 70%;
        padding: 20rpx 0;
        border-radius: 50rpx;
    }
}
</style>../../api/community